<template>
  <view class="popup-view-box bottom-popup" :class="cls">
    <!-- 遮罩层 -->
    <view class="mask" @click="closePopup"></view>
    
    <!-- 弹出框内容 -->
    <view class="popup-view-content" :style="`height: ${height}; ${customStyle}`">
      <slot></slot>
    </view>
  </view>  
</template>

<script setup>
import { watch,ref } from 'vue'

const props = defineProps({
   modelValue: {
      type: Boolean,
      default: false
   },
   height: { 
      type: String,
      default: 'auto'
   },
   customStyle: { 
      type: String,
      default: ''
   }
});

const cls = ref(props.modelValue ?'show':'');

const emit = defineEmits(['update:modelValue']);

const closePopup = () => {
  emit('update:modelValue', false);
};

// 兼容旧版show prop
watch(() => props.modelValue, (val) => {
  emit('update:modelValue', val);
  cls.value = val ? 'show' : '';
});

</script>

<style lang="scss" scoped>
.popup-view-box {
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        right:0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        transition: all 0.6s cubic-bezier(0.25,0.1,0.25,1.2);
        z-index: 1;
        opacity: 0;
        will-change: opacity;
        display:none;
    }
    
    &.show .mask {
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 1;
    }
}



.popup-view-content {
  position: fixed;
  height: auto;
  min-height: 10vh;
  max-height: 80vh;
  width: 100vw;
  z-index: 2;
  bottom: 0;
  left: 0;
  background-color: #fff;
  border-radius: 40rpx 40rpx 0 0;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25,0.1,0.25,1.2);
  will-change: transform;
  transition-delay: 0.05s;
}

.bottom-popup.show .mask {
  opacity: 1;
  display: block;
}

.bottom-popup.show .popup-view-content {
  transform: translateY(0);
  transition-delay:0.05s;
}
</style>
